<template>
	<view class="box">
		<view style="font-size: 50rpx;" class="box-nav">
			<u-tabs @click="click" size="50" :list="list4" lineWidth="15;margin-left: 60rpx;" :activeStyle="{
 			        color: '#4c99e6',
 			        fontWeight: 'bold',
 			        transform: 'scale(1.15)'
 			    }" :inactiveStyle="{
 			        color: '#369',
 			        transform: 'scale(1)'
 			    }" itemStyle=" font-size:100rpx; padding-left: 190rpx; height: 100rpx;font-weight: bold; "></u-tabs>
			</u-tabs>
		</view>
	<view style="background-color: #D0D8EB;width: 100%;height:100vh;">
		<view class="box-one" v-for="(item,index) in list ">
			<view style="display: flex;">
				<view style="font-weight: bold;font-size: 27rpx;">
					预约人: {{item.name}}
				</view>
				<view style="   word-spacing: 5rpx; color: #EEA93B; position: absolute;left: 475rpx;font-size: 29rpx;">
					就餐人数:  {{item.names}}
				</view>
			</view>
			<view class="">
				<view style=" color: #999999; margin-top: 17rpx;">
					就餐地址: {{item.eatplace}}
				</view>			
			</view>
			<view class="">
				<view style="  color: #999999;margin-top: 5rpx;">
					就餐时间: {{item.eattime}}
				</view>			
			</view>
			<view style=" justify-content: space-between; color: #999999; margin-top: 0rpx; display: flex;" class="">
				<view class="">
					联系电话: {{item.phone}}
				</view>
				<view style=" color: #37DE76; margin-right: 35rpx;margin-top: 40rpx; " class="">
					{{item.isshow}}
				</view>
			</view>
		</view>
		<navigator url="/pages/preeat/preeat">
	 	<view style=" color: aliceblue; text-align: center; line-height: 80rpx;  border-radius: 60rpx; width: 90%;height: 80rpx; background-color:#3F76EE ; margin-left: 30rpx; width: 90%; position: absolute;top: 1200rpx;" >就餐预约</view>
		</navigator>
	 </view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list4: [{
					name: '已预约'
				}, {
					name: '已取消',
					badge: {
						isDot: true
					}
				}],
				list:[],
				list2: [
					{
					name: '王强',
					names: ' 2',
					eatplace: 'A区食堂',
					eattime: '2022-5-28 12:30:00',
					phone: '1388886666',
					isshow: '已预约'
					},			 
				 ],
				 list3: [
				 	{
				 	name: '王强',
				 	names: ' 2',
				 	eatplace: 'A区食堂',
				 	eattime: '2022-5-28 12:30:00',
				 	phone: '1388886666',
				 	isshow: '已取消'
				 	},			 
				  ]
			}
		},
		created() {
			//显示第一张
			this.list = this.list2
		},
		methods: {
			click(e) {
				console.log(e.index);
				this.$nextTick(() => {
					if (e.index == 0) {
						this.list = this.list2
					}else if(e.index == 1){
				 		this.list = this.list3
					}
			 })				
			}
		}
	}
</script>

<style lang="scss">
	.box-nav {
		font-size: 640rpx;
		box-shadow: 0 0 8px #DDD;
	}

	.down {
		margin-top: 50rpx;
	}

	.box-one {
		width: 90%;
		height: 230rpx;
		position: absolute;
		top: 150rpx;
		left: 35rpx;
		background-color: white;
		border-radius: 10rpx;
	}

	.box-one view {
		margin-top: 10rpx;
		margin-left: 20rpx;
		font-size: 25rpx;
		
	}
</style>
